<script setup>
import {ref} from "vue";

const input = ref('')
</script>

<!--Mission Editor中间部分-->
<!--Mission Name输入框-->
<!--Mission Summary文字-->
<template>
  <div id="missionCenter">
    <el-row>
      <el-col :span="24">
        <el-row>
          <!--左边-->
          <el-col :span="7" class="left-col">
            <span class="bold-text">Mission Name:</span>

            <input
                v-model="input"
                placeholder="Mission: <Name>"
                style="width: 60%;
                height:50%;
                margin-left:5px;
                padding-left:5px ;
              background-color: #1f1f1f;
              color: white;
              border: none;
              font-size: 10px;
              "
            />
          </el-col>

          <!--右边-->
          <el-col :span="17">
            <span class="bold-text">Mission Summary:</span>
            <span style="margin-left: 5px" class="bold-text">Air intercept</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style>
#missionCenter {
  margin-top: 5px;
}

.bold-text {
  font-weight: bold;
  font-size: 10px;
}

</style>